import React from "react";
import "./home.css";
import Newmodule from "../../component/new_module";
// import $ from 'jquery';
import axios from "axios";
// 函数表达式
class home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      arr: [],
      type: 0,
      title1: ""
    };
    // this.handleClick = this.handleClick.bind(this);
  }
  currentClick(type, eve) {
    this.setState({
      type
    });
    let url;
    if (type === 0) {
      url = "../../../mock/index.json";
    } else if (type === 1) {
      url = "../../../mock/index1.json";
    } else if (type === 2) {
      url = "../../../mock/index2.json";
    } else if (type === 3) {
      url = "../../../mock/index3.json";
    }
    this.getdata(url);
  }
  getdata(url = "../../../mock/index.json") {
    // let that=this;
    //   $.ajax({
    //     url:url,
    //     async: true,
    //     success: function (data) {
    //      that.setState({
    //         arr:data
    //      })
    //     }
    // });

    axios({
      url: url
    })
      .then(data => {
        console.log(data);
        this.setState({
          arr: data.data
        });
      })
      .catch(err => {
        console.log(err);
      });
  }
  // 路由跳转
  nav(child) {
    console.log(child)
    console.log(this.props)
     this.props.history.push({pathname:'/Detail',query:child})
    //https://blog.csdn.net/qq8241994/article/details/85074581 路由传参地址介绍
    // this.props.history.push({ pathname: "/Detail", state: child });
  }
  //子组件传参
  // handleClick(type) {
  //   console.log(type, "子组件传参");
  //   this.setState({
  //     title1:type
  //   })
  //   console.log(this.state)
  //   // this.forceUpdate();
  // }
  //子组件传参
  // handleClick=(type)=>{
  //   console.log(type,'子组件传参')
  //  }
  // 生命周期
  componentDidMount() {
    this.getdata();
  }
  

  render() {
    // let {arr}=this.state;
    let { type,title1 } = this.state;
    console.log(this.state)
    return (
      <div>
        <div style={{display:{title1}?'block':'none'}} className="head">{ title1 }</div>
        <div className="head_bg" />
        <div className="head_tap">
          <h3 onClick={this.currentClick.bind(this, 0)}>感知问题</h3>
          <h3 onClick={this.currentClick.bind(this, 1)} data-index="222">
            软件问题
          </h3>
          <h3 onClick={this.currentClick.bind(this, 2)}>使用问题</h3>
          <h3 onClick={this.currentClick.bind(this, 3)}>系统问题</h3>
          <div
            className="active"
            style={{ left: 0.4 * 1 + type * 0.9 + "rem" }}
          />
        </div>
        {this.state.arr.map((child, index) => {
          return <Newmodule  onClick={this.nav.bind(this,child)}   content={child} key={index}  />;//路由跳转
          // return  <Newmodule onchild={this.handleClick} content={child} key={index} />
       
      
          // return       <Newmodule  onchild={this.handleClick.bind(this)}   content={child} key={index}  />//子组件传参
         
        })}
      </div>
    );
  }
}

export default home;
